<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom3" style="height: 150px;margin-top: 10px;"></div>
    </div>
</template>
<script>
import { get } from '@/utils/request';
import { DualAxes } from '@antv/g2plot';
import moment from 'moment/moment';
import { mapState } from 'vuex';
export default {
    data() {
        return {
            title: '监测点信息',
            params: {
                page: 1,
                pageSize: 100
            },
            // 存放数据
            pm10Data: [],
            tspData: [],
            dualAxes: null
        }
    },
    computed: {
        ...mapState(['ed'])
    },
    watch: {
        ed: {
            handler(n, o) {
                // 根据设备信息重新查询数据 重新渲染图表
                this.params.engineer_id = n.engineer_id;
                this.params.device_id = n.device_id;
                this.getKeliData();
                // 根据查询到的数据 重新渲染图表
                this.dualAxes.changeData([this.pm10Data, this.tspData]);
            },
            // 深度侦听
            deep: true
        }
    },
    methods: {
        // 分装折线图函数
        loadZhe() {
            this.dualAxes = new DualAxes(this.$refs.bottom3, {
                data: [this.pm10Data, this.tspData],
                xField: 'insert_time',
                yField: ['pm10', 'tsp'],
                geometryOptions: [
                    {
                        geometry: 'column',
                        // 添加柱子样式配置，设置为绿色
                        style: {
                            fill: '#00ff00', // 绿色填充
                            // 可选：添加边框
                            stroke: '#008000', // 深绿色边框
                            lineWidth: 1
                        }
                    },
                    {
                        geometry: 'line',
                        lineStyle: {
                            lineWidth: 2,
                        },
                        // 添加折点配置
                        point: {
                            size: 5, // 点的大小
                            shape: 'circle', // 点的形状
                            style: {
                                fill: '#fff', // 点的填充色
                                stroke: '#5B8FF9', // 点的边框色
                                lineWidth: 2, // 点的边框宽度
                            },
                        },
                        // 折点数据标签配置
                        label: {
                            position: 'top', // 标签位置：top/right/bottom/left
                            style: {
                                fill: '#fff', // 标签文字颜色
                                fontSize: 10, // 标签文字大小
                                fontWeight: 'bold', // 标签文字粗细
                            },
                            formatter: (datum) => {
                                // 格式化显示内容，只显示数值
                                return datum.tsp;
                            },
                        }
                    },
                ],
                xAxis: {
                    label: {
                        // rotate: -45,
                        style: {
                            fill: "white",
                            fontSize: 11
                        }
                    }
                },
                yAxis: [
                    {
                        label: {
                            style: {
                                fill: "white",
                                fontSize: 13,
                            },
                        },
                    },
                    {
                        label: {
                            style: {
                                fill: "white",
                                fontSize: 13,
                            },
                        },
                    },
                ],
                legend: {
                    position: 'top',
                },
                tooltip: {
                    showMarkers: true,
                    domStyles: {
                        "g2-tooltip": {
                            background: "#147",
                            color: "white",
                            fontSize: 15,
                        },
                    },
                },

            });

            this.dualAxes.render();
        },
        // 封装方法获取后端接口数据
        async getKeliData() {
            let res = await get('/dashboard/pageQueryTodayData', this.params);
            // console.log(res, "获取响应");
            let temp = [];

            res.data.list.forEach((item, index, arr) => {
                arr[0].pm10 = 109;
                arr[0].tsp = 33;
                item.insert_time = moment(item.insert_time).format("HH:mm")
                // 由于查询数据密度太密集，需要处理数据，每隔十条取一条数据
                if (index % 10 == 0) {
                    temp.push(arr[index])
                }
            });
            this.pm10Data = temp;
            this.tspData = temp;
        }
    },
    async mounted() {
        await this.getKeliData();
        this.loadZhe();
    },
}
</script>
<style lang="less" scoped></style>